<template>
    <h1>用户借款还款列表</h1>

    <table>
        <thead>
            <tr>
                <th>借款款项ID</th>
                <th>借款款项名称</th>
                <th>借款最高金额</th>
                <th>借款最高年限</th>
                <th>预计月还款金额</th>
                <th>利息值</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Show">
                <td>{{ item.BM_Id }}</td>
                <td>{{ item.BM_Name }}</td>
                <td>{{ item.BM_Money }}</td>
                <td>{{ item.BM_Year }}</td>
                <td>{{ Number(item.BM_Money)*Number(item.BM_Year)* Number(item.BMI_Interest)/12 }}</td>
                <td>{{ item.BMI_Interest }}</td>
                <td>
                    <a href="#" @click="jump(item.BM_Id)" >用户还款明细</a>
                </td>
            </tr>
        </tbody>

    </table>


</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()

const Show = ref([{
    BM_Id:'',
    BM_Name:'',
    BM_Year:'',
    BM_Money:'',
    BMI_Interest:'',
}])

onMounted (()=>{
    ShowBorrow()
})

const ShowBorrow = ()=>{
    axios({
        method:'get',
        url:'http://localhost:56707/api/Borrow/ShowBorrow',
        
    })
    .then(res=>{
        console.log(res.data);
        Show.value = res.data
    })
    .catch(err=>{
        console.log(err);
    })
}

const jump = (Id:string)=>{
    router.push({
        name:'UserBorrowPageInfo',
        params:{
            Id:Id
        }
    })
    
}

</script>
